<template>
  <div class="home">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" @load="onLoad">
        <div class="box" v-for="(item,i) in datas" :key="i">{{i}}</div>
        <!-- <van-cell v-for="item in list" :key="item" :title="item"/> -->
      </van-list>
      <!-- <p>刷新次数: {{ count }}</p> -->
    </van-pull-refresh>
    <!-- <div class="box" v-for="(item,i) in datas" :key="i"></div> -->
    <!-- <van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>-->
    <!-- <HelloWorld/> -->
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import { setTimeout } from "timers";

export default {
  name: "home",
  components: {
    HelloWorld
  },
  data() {
    return {
      datas: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      count: 0,
      isLoading: false,
      loading: false,
      finished: false,
      num:0,
    };
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.count++;
        this.num=0;
      }, 500);
    },
    onLoad(){
      setTimeout(()=>{
        this.num++;
        for(var i=0;i<this.num; i++){
          this.datas.push(...this.datas)
        }
        this.loading=false
      },500)
    }
  }
};
</script>
<style>
.box {
  width: 100%;
  height: 150px;
  border: 1px solid red;
}
</style>

